<template>
	<view class="content">
		<view class="top" :style="{backgroundImage:'url('+domain+'/static/img/bg.png)'}">
			<cu-custom bgColor="custom-top" :isBack="true" :isTitle="false">
				<block slot="backText" class="titilestyle">{{title}}</block>
			</cu-custom>
			<view class="title-box ">
				<image :src="domain+'/static/img/share.png'" mode="widthFix"></image>
				<view class="title-desc  text-center">
					每邀请到一位好友完成首单 即可拿<text class="text-xl text-bold">{{share_money}}</text>元美食补贴
				</view>
			</view>
			<view class="jieshao-box ">
				<image :src="domain+'/static/img/jieshao.png'" mode="widthFix"></image>
			</view>

			<view class="share-box bg-white">
				<view class="top-item  grid col-3">
					<view class="middle flex-direction">
						<view class="biaoti">佣金收益</view>
						<view class="shuzi">{{static.money || 0}}</view>
					</view>
					<view class="middle flex-direction">
						<view class="biaoti">下单人数</view>
						<view class="shuzi">{{static.buy_count || 0}}</view>
					</view>
					<view class="middle flex-direction">
						<view class="biaoti">受邀人数</view>
						<view class="shuzi">{{static.share_count || 0}}</view>
					</view>
				</view>
				<view class="bottom-item text-white flex justify-between">
					<view class="left middle round" @click="share('link')">
						<text class="cuIcon-link"></text>复制链接
					</view>
					<view class="right middle round" @click="share('code')">
						<text class="cuIcon-qr_code"></text>分享二维码
					</view>
				</view>
			</view>

			<view class="list-box bg-white margin-top-sm">
				<view class="list-box-top">
					<text v-for="(item,index) in typeArr" :key="index" :class="index==typeIndex?'hover':'nohover'"
						@click="changeType(index)">{{item.name}}</text>
				</view>
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="downOption" height="20%"
					bottom='0%'>
					<view class="list-item  flex justify-between" v-for="(item,index) in shareList" :key="index">
						<view class="left ">
							<image class="" :src="item.touser.headimgurl" mode="aspectFit"></image>
						</view>
						<view class="right  flex flex-wrap">
							<view class=" first-item  justify-between flex align-center">
								<text class="basis-xl text-cut text-xl text-bold">{{item.touser.user_name || ""}}</text>
								<text class="text-gray text-sm" v-if="item.is_order==0">已邀请</text>
								<text class="text-sm" v-if="item.is_order==1" style="color: #FEAF16;">完成首单</text>
							</view>
							<view class=" secend-item align-center">
								{{item.created_at || ""}}
							</view>
						</view>
					</view>

				</mescroll-body>

			</view>


		</view>
	
	
	
	</view>
</template>

<script>
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue" //下拉刷新 上拉加载组件
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"; //
	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollBody,
		},
		data() {
			return {
				title: "推广有礼",
				domain: this.resDomain,
				titleBox: {
					top: 0,
					left: 0,
				},
				downOption: {
					auto: false,
					use: false
				},
				upOption: {
					empty: {
						icon: "",
						tip: "~暂无~"
					}
				},
				typeIndex: 0,
				static: {
					buy_count: 0,
					money: 0,
					share_count: 0
				},
				param: {
					page: 0,
					limit: 10,
					is_order: "",
				},
				typeArr: [{
						name: "全部好友",
						type: ""
					},
					{
						name: "已邀请",
						type: 0
					},
					{
						name: "已下单",
						type: 1
					}
				],
				shareList: [],
				share_money: 0,
				shareLink: null,

			}
		},
		onShow() {
			let authorization = uni.getStorageSync('authorization');
			if (authorization) {
				if (this.statusState.is_share == 0) {
					uni.showModal({
						content: "当前校区暂未开通分享活动",
						showCancel:false,
						success: (r) => {
							uni.navigateBack({
								delta: 1
							})
						}
					})
				}
				this.getStatic();
				
			}

		},
		onShareAppMessage(res) {
		
			return {
				title: "一舟校园",
				path: "/pages/basic/basic",
			}
		},
		mounted() {
			let authorization = uni.getStorageSync('authorization');
			if (!authorization) {
				this.getStatic();
			}
		},
		methods: {
			//获取统计
			getStatic() {
				this.apiRequest('/buyer/ShareCount', {}, "get", 0).then(res => {
					if (res.code != 200) {
						return;
					}
					this.static = res.data;
					this.getShareTotal();
				}, e => {
					uni.showModal({
						content: "出错了，请稍后再试",
						showcancel: false,
						success: (r) => {
							uni.navigateBack({
								delta: 1
							})
						}
					})
				})
			},
			//获取推广金额 推广链接
			getShareTotal() {
				this.apiRequest('/buyer/ShareConfig', {
					area_id: uni.getStorageSync('area_id'),
				}, "get", 0).then(res => {
					if (res.code != 200) {
						return;
					}
					this.share_money = res.data.share_money;
				});
				this.apiRequest('/buyer/ShareLink', {
					area_id: uni.getStorageSync('area_id'),
				}, "get", 0).then(res => {
					if (res.code != 200) {
						return;
					}
					this.shareLink = res.data;
				})
			},
			//分享
			share(type) {
				switch (type) {
					case "link":
					    let authorization = uni.getStorageSync('authorization');
					    if (!authorization) {
					    	uni.showModal({
					    		content:"您还未登录，请先登录",
					    		success:(r)=> {
					    			if(r.confirm){
					    				uni.navigateTo({
					    					url:"./login"
					    				})
					    			}
					    			
					    		}
					    	})
					    }
					
						uni.setClipboardData({
							data: this.shareLink,
							showToast: false,
							success: () => {
								uni.showToast({
									title:'链接已复制',
									icon:"none"
								});
							}
						});
						break;
					case "code":
						uni.navigateTo({
							url: "/pages/user/shareInfo"
						})
						break;
				}
			},
			//改变类型
			changeType(index) {
				this.typeIndex = index;
				this.param.is_order = this.typeArr[index].type;
				this.mescroll.resetUpScroll();
			},
			//成功加载bg
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback() {
				this.mescroll.triggerDownScroll();
			},
			upCallback(page) {
			
				this.param.page = page.num;
				this.param.limit = page.size;
				this.apiRequest('/buyer/ShareList', this.param, "get", 0).then(res => {
					uni.stopPullDownRefresh();
					if (res.code != 200) {
						this.mescroll.endSuccess();
					}
					if (page.num == 1) {
						this.shareList = []
					}
					this.shareList = this.shareList.concat(res.data.data); //追加新数据
					this.mescroll.endBySize(this.shareList.length, res.data.total);

				}).then(() => {
					uni.stopPullDownRefresh();
					this.mescroll.endErr();
				})
			}


		}




	}
</script>
<style lang="scss">
	.content {
		.top {
			width: 100vw;
			height: calc(100vw*(669/750));
			background-repeat: no-repeat;
			background-size: cover;

			.title-box {
				position: relative;
				width: inherit;
				height: calc(100vw*(482/750));

				image {
					width: inherit;
					z-index: 1;
				}

				.title-desc {
					position: absolute;
					z-index: 9;
					width: calc(100vw*(325/750));
					height: calc(100vw*(82/750));
					font-size: calc(100vw*(27/750));
					font-weight: 500;
					color: #E3512A;
					top: calc(100vw*(219/750));
					left: calc(100vw*(212/750));
					line-height: 45rpx;
				}
			}

			.jieshao-box {
				width: inherit;

				image {
					margin-left: calc(100vw*(30/750));
					width: calc(100vw*(690/750));
				}

				height: calc(100vw*(279/750));
				margin-top: calc(100vw*(-94/750));
			}

			.share-box {
				width: calc(100vw*(690/750));
				margin-left: calc(100vw*(30/750));
				height: calc(100vw*(280/750));
				box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 20rpx;
				padding-left: calc(100vw*(45/750));

				.top-item {
					width: calc(100vw*(600/750));
					height: calc(100vw*(150/750));

					.middle {
						.biaoti {
							font-size: calc(100vw*(20/750));
							font-weight: 500;
							color: #999999;
						}

						.shuzi {
							margin-top: 15rpx;
							font-size: calc(100vw*(36/750));
							font-weight: 800;
							color: #333333;
						}
					}
				}

				.bottom-item {
					width: calc(100vw*(600/750));
					height: calc(100vw*(80/750));

					.left {
						height: inherit;
						width: calc(100vw*(280/750));
						background-color: #FB4733;

						text {
							margin-right: 10rpx;
							margin-top: 5rpx;
						}
					}

					.right {
						height: inherit;
						width: calc(100vw*(280/750));
						background-color: #FEAF16;

						text {
							margin-right: 10rpx;
							margin-top: 5rpx;
						}
					}
				}
			}

			.list-box {
				box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 20rpx;
				width: calc(100vw*(690/750));
				margin-left: calc(100vw*(30/750));

				.list-box-top {
					font-size: calc(100vw*(32/750));
					padding: calc(100vw*(40/750));

					text {
						margin-right: 40rpx;
					}

					.hover {
						font-weight: 800;
						color: #333333;
					}

					.nohover {
						font-weight: 500;
						color: #999999;

					}
				}

				.list-item {
					width: inherit;
					height: calc(100vw*(162/750));
					border-bottom: 2px solid #F7F7F7;
					padding: calc(100vw*(40/750));

					.left {
						width: calc(100vw*(100/750));
						height: calc(100vw*(100/750));

						image {
							width: inherit;
							height: inherit;
							border-radius: 50%;
						}
					}

					.right {
						width: calc(100vw*(498/750));
						height: calc(100vw*(100/750));
						margin-left: calc(100vw*(10/750));

						.first-item {
							width: inherit;
						}

						.secend-item {
							width: inherit;
							font-size: 24rx;
							font-weight: 500;
							color: #999999;
						}

					}

				}

			}


		}

	}
</style>
